<template>
  <div>
    <ul>
        <li>
            <van-nav-bar
                title="腕表首饰"
                left-arrow
                @click-left="onClickLeft"
                fixed
                />
        </li>
        <li class="sear">
          <van-search v-model="value" placeholder="施华洛世奇" shape="round" />
          <div>
            <van-icon name="service-o" />
          </div>
        </li>
        <li class="bn">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
        </li>
        <li class="nav">
          <van-grid :column-num="5">
            <van-grid-item v-for="(v,index) in nav" :key="index"  >
              <span v-html="v.text" class="stxt"></span>
              <van-image :src="v.img" />
            </van-grid-item>
          </van-grid>
        </li>
        <li class="sup">
          <div class="tp">
            <img src="https://pic.cdfgsanya.com/assets/upload/visual/f9f819dc8b0c48af450e52f5607891b8.png" alt="">
            <span>超值单品</span>
          </div>
          <div class="fat">
            <div class="btt" v-for="(v,index) in sup1" :key="index">
              <img :src="v.pic" alt="">
              <p v-html="v.moeny"></p>
              <span v-html="v.sole"></span>
            </div>
          </div>
          
        </li>
        <li class="sup">
          <div class="tp">
            <img src="https://pic.cdfgsanya.com/assets/upload/visual/f9f819dc8b0c48af450e52f5607891b8.png" alt="">
            <span>品牌精选</span>
          </div>
          <van-grid :column-num="5">
            <van-grid-item v-for="(v,index) in logo" :key="index"  >
              <van-image :src="v" />
            </van-grid-item>
          </van-grid>
        </li>
        <li class="choose">
          <van-tabs swipeable>
            <van-tab v-for="(v,index) in choosetitle" :title="index==0?'配饰':'腕表'" :key="index">
              <div class="lff">
                <div class="lf" v-for="(v,index) in v.one" :key="index">
                  <img :src="v.img" alt="">
                  <p  v-html="v.txt"></p>
                  ￥<span v-html="v.price"></span>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      sup1:[
        {
          "pic":"https://pic.cdfgsanya.com/assets/upload/product/78548e180fdaf72eef49aee909f2ecd0_400x400.jpg",
          "moeny":"33630.00",
          "sole":"6折"
        },
        {
          "pic":"https://pic.cdfgsanya.com/assets/upload/product/601/603/225513/228661/228668/306842_1_pic400_6267.JPG",
          "moeny":"400.00",
          "sole":"6.5折"
        },
        {
          "pic":"https://pic.cdfgsanya.com/assets/upload/product/926bcb5738c87b7f48e1a6cc86edc733_400x400.jpg",
          "moeny":"3040.00",
          "sole":"6折"
        },
        {
          "pic":"https://pic.cdfgsanya.com/assets/upload/product/9a634914efe8e0813033309c69266d9f_400x400.jpg",
          "moeny":"645.00",
          "sole":"6.5折"
        },
        {
          "pic":"https://pic.cdfgsanya.com/assets/upload/product/0ceca68355874c6838ac39d4e6492f7a_400x400.jpg",
          "moeny":"6220.00",
          "sole":"7折"
        },
        {
          "pic":"https://pic.cdfgsanya.com/assets/upload/product/cdd20b847754c2e1737759784f490cfe_400x400.jpg",
          "moeny":"740.00",
          "sole":"6折"
        },
        {
          "pic":"https://pic.cdfgsanya.com/assets/upload/product/601/603/225511/228634/228636/272218_1_pic400_6210.jpg",
          "moeny":"870.00",
          "sole":"7折"
        },
        {
          "pic":"https://pic.cdfgsanya.com/assets/upload/product/77c037f9e6302b3379e50bbab1675ae1_400x400.jpg",
          "moeny":"645.00",
          "sole":"6.5折"
        },
        {
          "pic":"https://pic.cdfgsanya.com/assets/upload/visual/d4ce2d3da6e2b1faffad5532fcad3401.png",
        }
      ],
      choosetitle:[
            {
              "one":[
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/512134e7a9189d8eed64949d7ddadc15_400x400.jpg",
                  "text":"OMEGA欧米茄碟飞典雅钻机械女士腕表",
                  "price":"29300"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/601/603/225511/228634/228636/337792_1_pic400_2059.JPG",
                  "text":"DW丹尼尔惠灵顿编织钢带石英女士腕表",
                  "price":"1007.6"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/b912ecd58d3c8d9a2b90e8db72675bf6_400x400.jpg",
                  "text":"Omega欧米茄碟飞系列自动机械男士腕表",
                  "price":"27000"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/fa595a421433bdf80f452db1e37406bb_400x400.jpg",
                  "text":"Lolarose 拱门系列石英女士腕表",
                  "price":"1100"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/42ded83ba6d04101c8ed3a9a0c286c95_400x400.jpg",
                  "text":"Longines浪琴心月系列石英女士腕表",
                  "price":"10250"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/628db5a49e0a55cacd2864499906167f_400x400.jpg",
                  "text":"HappieWatch 小怪兽动物派对系列石英表",
                  "price":"1012"
                }
              ]
            },
            {
              "one":[
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/9203082b3e358e95a0f1cf56c59998b1_400x400.jpg",
                  "text":"施华洛世奇 Gema 520 手链",
                  "price":"644"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/ddc3cc42f84480a108d8ce6d9367aaaf_400x400.JPG",
                  "text":"施华洛世奇 DAZZLING SWAN 手链 S",
                  "price":"644"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/7567006fa116d79fd1f2e9d8dd515a2b_400x400.JPG",
                  "text":"施华洛世奇 Dazzling Swan Y形项链",
                  "price":"700"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/e52f9912f4a6f14219f53e937b46f0c1_400x400.jpg",
                  "text":"Boucheron宝诗龙 Quatre Classique迷你环垂饰项链",
                  "price":"22000"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/38b74f62a145a3eeace40b81ac652e91_400x400.jpg",
                  "text":"施华洛世奇 Gema 520 手镯",
                  "price":"812"
                },
                {
                  "img":"https://pic.cdfgsanya.com/assets/upload/product/6d08351cd77611f3f4c95767f12f4ee1_400x400.jpg",
                  "text":"APM Monaco 粉母贝爱心垂坠耳环",
                  "price":"1680"
                }
              ]
            }
      ],
      value: '',
      logo:['https://pic.cdfgsanya.com/assets/upload/brandlogo/2016/10/14/20161014034400230.jpg','https://pic.cdfgsanya.com/assets/upload/brandlogo/2017/11/7/20171107112509998.jpg','https://pic.cdfgsanya.com/assets/upload/brandlogo/2016/10/14/20161014030032454.jpg','https://pic.cdfgsanya.com/assets/upload/brandlogo/b15084d85b3dcbf28e82e1642032af7d.jpg','https://pic.cdfgsanya.com/assets/upload/brandlogo/7e90e73a9158b4f09d5c3535ee799c07.jpg','https://pic.cdfgsanya.com/assets/upload/brandlogo/2016/10/12/20161012043159506.jpg','https://pic.cdfgsanya.com/assets/upload/brandlogo/7bd002b713c57febdfd20e463def8ee9.png','https://pic.cdfgsanya.com/assets/upload/brandlogo/2016/10/14/2016101403121464.jpg','https://pic.cdfgsanya.com/assets/upload/brandlogo/f0414181038fe09c720af357e5074c8e.jpg','https://pic.cdfgsanya.com/assets/upload/brandlogo/2016/10/14/20161014034429481.jpg'],
      images:['https://pic.cdfgsanya.com/assets/upload/visual/4457eaa01521e29ed942480abdc1b23c.jpg?1675652521846','https://pic.cdfgsanya.com/assets/upload/visual/1d0b7b480a9261e14341b8ec1dd151da.jpg?1675155711807','https://pic.cdfgsanya.com/assets/upload/visual/c8f464953a48739a95ad797750b1d87e.jpg?1675130284363'],
      nav:[
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/186d5531f32b0d6b3531659afb5dbc38.png?1656396983593",
          text:"高奢腕表"
        },
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/95ecb54909f9c64d4d85087b6c222c49.png?1656396998822",
          text:"豪华腕表"
        },
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/d8a1688b92511461c3a3bc0c4281a7a4.png?1656397013019",
          text:"精品腕表"
        },
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/cdcefd08900f0623e17f6e126582a4a9.png?1656396968003",
          text:"线上专享"
        },
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/be33e412aedf05f6a66ac20390bfe6a9.png?1656397029683",
          text:"儿童腕表"
        },
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/0faf88395fbc7e5044f25c1061a82d39.png?1656396991619",
          text:"高级珠宝"
        },
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/a725799155510e2cb457fcfe174f881a.png?1656397020680",
          text:"时尚首饰"
        },
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/50fb05cad851d02c3cb6dd50aa03eed8.png?1656397005577",
          text:"黄金首饰"
        },
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/d88e5f41c387b4ef747b50efabc5d816.png?1656396975761",
          text:"精选套组"
        },
        {
          img:"https://pic.cdfgsanya.com/assets/upload/visual/7ce50554013cffc3141f85b4bf9944b9.png?1659941893247",
          text:"查看更多"
        },
      ],
      arr:""
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push('/home')
    },
  },
}
</script>

<style scoped>
.sear {
  margin-top: 54px;
}
.van-nav-bar {
  z-index: 5;
}
.fat {
  display: flex;
  overflow: auto;
  align-items: center;
  background: #fff;
  margin-top: 20px;
  border-radius: 12px;
}
.fat::-webkit-scrollbar {
    display: none;
}
.btt {
  margin: 0 10px;
  text-align: center;
}
.btt span {
  color:#b69874;
  background: #fbf5eb;
  padding: 3px 5px;
  border-radius: 7px;
}
.fat .btt img {
  width: 90px;
  height: 90px;
}
.lff {
  column-count: 2;
}
.lf {
  font-size: 12px;
  text-align: center;
  margin: 5px 0;
}
.lf img {
  width: 156px;
  height: 156px;
  border-radius: 12px;
}
.sup .tp {
  margin-left: 5px;
}
.sup img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.sup span {
  font-size: 14px;
  font-weight: 600;
  margin-left: 5px;
}
.sup {
  width: 355px;
  height: 186px;
  margin: auto;
  border-radius: 12px;
  margin-top: 10px;
}
.nav {
  position: relative;
}
.stxt {
  position: absolute;
  bottom: 0;
  font-size: 12px;
  margin: 3px 0;
}
.van-image {
  border-radius: 50%;
  overflow: hidden;
}
ul {
  background: url(https://pic.cdfgsanya.com/assets/upload/visual/301ecfabd64ea4fa1d481f9cafb973ab.png
);
  background-size: 100% 100%;
}
.bn {
  width: 355px;
  height: 150px;
  margin: auto;
  border-radius: 12px;
  overflow: hidden;
}
.bn img {
  width: 100%;
}
.sear {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.van-search {
  flex: 2;
}
.van-icon {
  margin-right: 5px;
}
</style>